<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="姓名">
        <el-input
          v-model="search.realName"
          placeholder="请输入姓名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="负责年级">
        <nice-select
          v-model="search.grade"
          placeholder="请选择年级"
          clearable
          :options="selectEnums.nice_course.grade"
        ></nice-select>
      </el-form-item>
      <el-form-item label="星级">
        <nice-select
          v-model="search.starNum"
          placeholder="请选择星级"
          clearable
          :options="star_num_options"
        ></nice-select>
      </el-form-item>
      <el-form-item label="分配状态">
        <nice-select
          v-model="search.allocationStatus"
          placeholder="请选择分配状态"
          clearable
          :options="allocation_status_options"
        ></nice-select>
      </el-form-item>
      <el-form-item label="指派状态">
        <nice-select
          v-model="search.designateStatus"
          placeholder="请选择指派状态"
          clearable
          :options="designate_status_options"
        ></nice-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList" size="small"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="list" border>
      <el-table-column prop="real_name" label="姓名">
        <template slot-scope="scope">
          <a @click="viewDetail(scope.row)">{{ scope.row.realName }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="联系方式">
        <template slot-scope="scope">
          <span>{{
            scope.row.isView ? scope.row.mobile : $hidePhone(scope.row.mobile)
          }}</span>
          <img
            :src="scope.row.isView ? viewOff : viewOn"
            @click.stop="viewPhone(scope.row)"
            style="cursor: pointer;"
          />
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="负责年级">
        <template slot-scope="scope">{{
          scope.row.grade | G(selectEnums.nice_course.grade)
        }}</template>
      </el-table-column>
      <el-table-column prop="star_num" label="星级">
        <template slot-scope="scope">{{ scope.row.starNum }}星</template>
      </el-table-column>
      <el-table-column
        prop="currentStudent"
        label="当前学生"
        sortable
      ></el-table-column>
      <el-table-column
        prop="studentUpper"
        label="学生上限"
        sortable
      ></el-table-column>
      <el-table-column prop="_rate" label="满额率" sortable></el-table-column>
      <el-table-column prop="date" label="分配状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.allocationStatus"
            :active-value="1"
            :inactive-value="0"
            @change="switchChange($event, scope.row, 'allocationStatus')"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="指派状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.designateStatus"
            :active-value="1"
            :inactive-value="0"
            @change="switchChange($event, scope.row, 'designateStatus')"
          ></el-switch>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>
<script>
import { myEnumsMixins } from "@/utils/mixins";
import viewOn from "@/assets/img/view_on.png";
import viewOff from "@/assets/img/view_off.png";
import { queryTutorList, updateById } from "@/api/api.js";
export default {
  data() {
    return {
      search: {
        realName: "",
        grade: "",
        starNum: "",
        allocationStatus: "",
        designateStatus: "",
        currPage: "1",
        pageSize: "30"
      },
      viewOn,
      viewOff,
      allocation_status_options: [
        {
          label: "不允许分配",
          value: "0"
        },
        {
          label: "允许分配",
          value: "1"
        }
      ],
      star_num_options: [
        {
          label: "1星",
          value: "1"
        },
        {
          label: "2星",
          value: "2"
        },
        {
          label: "3星",
          value: "3"
        },
        {
          label: "4星",
          value: "4"
        },
        {
          label: "5星",
          value: "5"
        }
      ],
      designate_status_options: [
        {
          label: "不允许",
          value: "0"
        },
        {
          label: "允许",
          value: "1"
        }
      ],

      options1: [],
      options2: [],
      options3: [],
      list: [],
      pageIndex: 1,
      pageSize: 10,
      total: 0
    };
  },
  mixins: [myEnumsMixins],
  methods: {
    async getDataList() {
      let res = await queryTutorList(this.search);
      if (res[0]) {
        return;
      }
      let data = res[1];
      if (data && data.code === 0) {
        this.list = data.data.list;
        this.list.forEach((item, index) => {
          item._rate =
            item.currentStudent == 0 || item.studentUpper
              ? "0%"
              : Number(item.currentStudent / item.studentUpper) * 100 + "%";
        });
        this.total = data.data.totalCount;
      }
    },
    onSubmit() {},
    viewPhone(row) {
      this.list.forEach(ele => {
        if (ele.id !== row.id) {
          ele.isView = false;
        }
      });
      row.isView = !row.isView;
      this.list = [...this.list];
    },
    async switchChange(e, row, key) {
      let params = {
        id: row.id
      };
      params[key] = e;
      let res = await updateById(params);
      let data = res[1];
      if (data.code != 200) {
        this.getDataList();
      }
    },
    viewDetail(row) {
      this.$router.push({
        name: "staff-detail",
        params: { id: row.tutorId }
      });
    },
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.getDataList();
    }
  },
  mounted() {
    this.getDataList();
  }
};
</script>
